<!--
 * @Descripttion: 
 * @version: 
 * @Author: Mr. Xu
 * @Date: 2020-12-15 08:57:28
 * @LastEditors: Mr. Xu
 * @LastEditTime: 2020-12-18 17:41:46
-->
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>团队管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="robots" content="noindex,nofollow" />
  <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
  <link rel="stylesheet" href="__CSS__/common.css" media="all">
  <style>
    .layui-form-item {
      width: 600px;
    }

    .layui-layer-content img {
      border: none;
      width: 100%;
    }
  </style>
</head>

<body class="page-body">
  <h2 class="comm-title">团队管理</h2>
  <div class="layui-tab">
    <ul class="layui-tab-title page-tab-title">
      <li class="layui-this">团队列表</li>
      <li><a href="{:url('add')}">新增</a></li>
    </ul>
  </div>
  <div class="tpcms-body-div page-main">
    <form class="layui-form serch new-form" method="post">
      <div class="layui-form-item" style="float: left;">
        <div class="layui-input-inline">
          <input type="text" name="keywords" lay-verify="title" autocomplete="off" placeholder="请输入团昵称或团长名称"  class="layui-input layui-btn-sm">
        </div>
        <div class="layui-input-inline">
          <div class="layui-inline">
            <div class="layui-input-inline">
              <input type="text" class="layui-input" id="seach_time" placeholder="创建时间" name="seach_time">
            </div>
          </div>
        </div>
        <button type="button" class="layui-btn layui-btn-danger layui-btn-sm search-btn">搜索</button>
      </div>
    </form>
    <div class="page-table">
      <table id="tables" lay-filter="datas"></table>
    </div>

    <script type="text/html" id="head_img">
      <img src="{{d.head_img}}" width="50px">
    </script>
    <script type="text/html" id="status">
		{{# if (d.status==1) { }}
		  开启中
		{{# } else { }}  
		  禁用中
		{{# } }}
	</script>

    <script type="text/html" id="barDemo">
      <a href="javascript:;" class="layui-btn layui-btn-xs a_menu layui-btn-primary btn-edit" lay-event="member">成员列表</a>
      <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-primary  btn-edit" lay-event="add_member">添加成员</a>
      <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-primary  btn-edit" lay-event="edit">编辑</a>
      <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-primary delete btn-edit" lay-event="delete">解散</a>
		</script>
    <script src="__PUBLIC__/jquery/jquery.min.js"></script>
    <script src="__PUBLIC__/layui/layui.js"></script>

    <script type="text/javascript">
      var lists = [[{
        field: 'id',
        title: '序号',
        width: 60,
        type: 'numbers',
      }, {
        field: 'nickname',
        title: '团昵称',
        width: 100
      }, {
        field: 't_name',
        title: '团长名称',
        width: 100
      }, {
        field: 'head_img',
        title: '团头像',
        toolbar: '#head_img',
        width: 120
      }, {
        field: 'status',
        title: '状态',
        toolbar: '#status',
        width: 80
      }, {
        field: 'add_time',
        title: '创建时间',
        width: 150,
        templet: "<div>{{layui.util.toDateString(d.add_time*1000, 'yyyy-MM-dd HH:mm:ss')}}</div>"
      }, {
        title: '操作',
        width: 250,
        toolbar: '#barDemo'
      }]];
      layui.use(['table', 'laydate', 'form'], function () {
        var table = layui.table, form = layui.form,
          laydate = layui.laydate;
        laydate.render({
          elem: '#seach_time',
          type: 'datetime',
          range: '~'
        });
        table.on('tool(datas)', function (obj) {
          var data = obj.data;
          /*编辑*/
          if (obj.event === 'content') {

            layer.open({
              title: false
              , shadeClose: true
              , shade: 0.5
              , type: 1
              , skin: "open_allview"
              , area: ['80%', '80%']
              , content: data.imgs,
              success: function () {
                form.render();
              }
            });

          }
          if (obj.event === 'add_member') {
            layer.open({
              title: false
              , shadeClose: true
              , shade: 0.5
              , type: 2,
              skin: "open_allview"
              , area: ['80%', '80%']
              , content: "{:url('add_member')}?id=" + data.id
            });
          }
          if (obj.event === 'member') {
            layer.open({
              title: false
              , shadeClose: true
              , shade: 0.5
              , type: 2,
              skin: "open_allview"
              , area: ['80%', '80%']
              , content: "{:url('member')}?id=" + data.id
            });
          }
          if (obj.event === 'edit') {
            layer.open({
              title: false
              , shadeClose: true
              , shade: 0.5
              , type: 2,
              skin: "open_allview"
              , area: ['80%', '80%']
              , content: "{:url('edit')}?id=" + data.id
            });
          }
          if (obj.event === 'delete') {
            layer.confirm('确定要解散该团?', function (index) {
              $.ajax({
                url: "{:url('delete')}",
                data: { id: data.id },
                success: function (res) {
                  if (res.code == 0) {
                    layer.msg(res.message, { offset: '15px', icon: 1, time: 1000 }, function () {
                      window.location.reload();
                    });
                  } else {
                    layer.msg(res.message, { offset: '15px', icon: 2, time: 1000 });
                  }
                }
              })
            })
          }

        });
        $(".search-btn").click(function () {
          var keywords			=$("input[name='keywords']").val();
          var seach_time		=$("#seach_time").val();
          table.render({
            elem: '#tables', 
            url: "{:url('index_data')}?keywords="+keywords+"&seach_time="+seach_time,
            page: true,
            cols: lists
          });
        })
        table.render({
          elem: '#tables',
          url: "{:url('index_data')}",
          page: true,
          cols: lists
        });

      });

    </script>
  </div>
</body>

</html>